<template>
  <div class="baseDataContainer">
    <div class="businessValueContainer">
      <div
        v-if="headerNumber || headerNumber === 0"
        :class="
          headerContent[0] && header[headerContent[0].logicCode] >= 0 ? 'businessNumber white' : 'yellow businessNumber'
        "
      >
        {{ headerNumber | dataFormat(dataType) }}
      </div>
      <div class="businessNameContent">
        <div class="businessName">{{ baseTitleName }}</div>
        <div class="businessName">{{ titleDimContent }}</div>
      </div>
    </div>

    <div class="businessContainer">
      <div class="businessInfoContainer">
        <div class="businessInfoItem" v-for="(item, index) in headerContent" :key="index">
          <div class="businessInfoItemName">
            {{ item.name }}
          </div>
          <div
            id="businessInfoItemNumber"
            v-if="item.type === 'secondary'"
            :class="
              calcValueIsMoreZero(header[item.logicCode])
                ? 'shangshengColor businessInfoItemNumber'
                : 'xiajiangColor businessInfoItemNumber'
            "
          >
            {{ header[item.logicCode] | dataFormat(item.dataType) }}
            <span v-if="calcValueIsMoreZero(header[item.logicCode])">
              <svg-icon icon="shangsheng" class="shangsheng"></svg-icon>
            </span>
            <span v-if="!calcValueIsMoreZero(header[item.logicCode])">
              <svg-icon icon="xiajiang" class="xiajiang"></svg-icon>
            </span>
          </div>
          <div id="businessInfoItemNumber" v-else class="businessInfoItemNumber">
            {{ header[item.logicCode] | dataFormat(item.dataType) }}
          </div>
        </div>
      </div>
    </div>

    <!-- 趋势图 -->
    <echarts-line
      v-if="dimContent.length > 0"
      :xAxis="tendencyXAxisData"
      :data="tendencySeriesData"
      :unitLevel="UnitLevel"
      :dateType="dateType"
      @dateChange="tendencyDateChange"
    >
    </echarts-line>
    <div class="title_content">
      <div class="titleLine"></div>
      <div class="titleName" v-if="operation === 'drill'">下钻分析</div>
      <div class="titleName" v-if="operation === 'pivot'">交叉分析</div>
      <div class="titleName" v-if="operation === 'attribution'">归因分析</div>
    </div>
    <div>
      <div
        v-if="operation !== 'attribution'"
        :class="operation !== 'drill' ? 'organTag_container organTagButtom' : 'organTag_container'"
        @click="handledModifyPopup(operation)"
      >
        <div class="tagDimName">{{ baseTitleName }}</div>
        <div class="gengduoDim" v-if="dimContent[0]">
          <div class="targetName">
            {{ dimContent.length > 1 ? dimContent[0].name + '、' + dimContent[1].name : dimContent[0].name }}
          </div>
          <div><svg-icon icon="gengduo" class="gengduo"></svg-icon></div>
        </div>
      </div>
    </div>
    <div v-if="operation === 'attribution' && echartsRadarData.indicator && echartsRadarData.indicator.length > 0">
      <div class="radarContent">
        <div class="radarIndicator"></div>
        <div>{{ echartsRadarData.indicator[0].dimName }}</div>
      </div>
      <div class="radarContent">
        <div class="radarReference"></div>
        <div>{{ echartsRadarData.reference[0].dimName === 'all' ? '全司' : '-' }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import echartsLine from './echartsLine'
export default {
  // 头部信息header, 头部主指标的值headerNumber, 主指标值的类型dataType,主指标dimContent,fu指标secondaryContent,
  // 默认名称baseTitleName, 下层拼接名称 titleDimContent
  props: [
    'header',
    'headerNumber',
    'dataType',
    'dimContent',
    'secondaryContent',
    'titleDimContent',
    'baseTitleName',
    'operation',
    'tendencySeriesData',
    'UnitLevel',
    'dateType',
    'tendencyXAxisData',
    'echartsRadarData'
  ],
  components: {
    echartsLine
  },
  data() {
    return {
      headerContent: []
    }
  },
  mounted() {},
  methods: {
    handledModifyPopup(operation) {
      this.$emit('modifyPopup', true, operation, 'modifyButton')
    },
    tendencyDateChange(date) {
      this.$emit('tendencyDateChange', date)
    },
    calcValueIsMoreZero(value) {
      if (!value) {
        return true
      }
      if (Number(value) && Number(value) >= 0) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    secondaryContent(val) {
      // 存放主指标以外的信息,headerContent
      this.headerContent = []
      for (let i = 0; i < val.length; i++) {
        if (val[i].type === 'secondary') {
          this.headerContent.push(val[i])
        } else if (
          val[i].type === 'normal' &&
          this.header[val[i].logicCode] !== '' &&
          this.header[val[i].logicCode] !== null
        ) {
          this.headerContent.push(val[i])
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.baseDataContainer {
  .businessValueContainer {
    .headerlogicCode {
      font-size: 20px;
    }
    .headerlogicName {
      font-size: 20px;
    }
    .white {
      color: #fff;
    }
    .yellow {
      color: #ffb440;
    }
    .businessNumber {
      padding-top: 20px;
      font-size: 34px;
      line-height: 37px;
      font-weight: 600;
    }
    .businessNameContent {
      display: flex;
      flex-wrap: wrap;
      padding-top: 6px;
      .businessName {
        font-size: 16px;
        line-height: 25px;
        font-weight: 400;
        color: #e9e9ed;
      }
    }
  }
  .businessContainer {
    .businessInfoContainer {
      display: flex;
      justify-content: space-between;
      .businessInfoItem {
        .xiajiangColor {
          color: #6ed2bb;
        }
        .shangsheng {
          margin-left: 10px;
        }
        .xiajiang {
          margin-left: 10px;
        }
        .shangshengColor {
          color: rgba(253, 128, 141, 1);
        }
        .businessInfoItemNumber {
          margin-top: 6px;
          font-size: 16px;
          line-height: 22px;
        }
        .businessInfoItemName {
          font-size: 14px;
          display: block;
          line-height: 20px;
          margin-top: 10px;
          font-weight: 400;
          color: rgba(233, 233, 237, 0.88);
        }
      }
    }
  }
  .title_content {
    display: flex;
    align-items: center;
    line-height: 22px;
    padding-bottom: 16px;
    .titleLine {
      width: 4px;
      height: 15px;
      background: #0a82fa;
    }
    .titleName {
      font-size: 16px;
      padding-left: 6px;
      font-weight: 600;
      color: #ffffff;
    }
  }
  .radarContent {
    display: flex;
    align-items: center;
    .radarIndicator {
      width: 6px;
      height: 6px;
      margin-right: 6px;
      background: #0a82fa;
      border-radius: 1px;
    }
    .radarReference {
      width: 6px;
      height: 6px;
      margin-right: 6px;
      background: #56617e;
      border-radius: 1px;
    }
  }
  .organTagButtom {
    margin-bottom: 16px;
  }
  .organTag_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(233, 233, 237, 0.32);
    height: 40px;
    border-radius: 2px;
    padding-left: 10px;
    padding-right: 7px;
    // margin-bottom: 6px;
    .tagDimName {
      font-size: 14px;
      color: #ffffff;
      line-height: 20px;
    }
    .gengduoDim {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .targetName {
        font-weight: 400;
        color: #d5d5d8;
        line-height: 20px;
        font-size: 14px;
      }
      .gengduo {
        font-size: 26px;
      }
    }
  }
  .organTagButtom {
    margin-bottom: 16px;
  }
  .baseDataline {
    height: 1px;
    margin: 16px -20px;
    width: 375px;
    background: $light-bc;
  }
  .indicatorFlex {
    display: flex;
    align-items: center;
    .indicator {
      width: 6px;
      height: 6px;
      background: #56617e;
      border-radius: 1px;
    }
    .reference {
      width: 6px;
      height: 6px;
      background: #0a82fa;
      border-radius: 1px;
    }
    .referenceName {
      font-size: 14px;
      font-weight: 400;
      color: #979aa4;
      line-height: 20px;
      padding-left: 6px;
    }
  }
}
</style>
